<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="utf-8">
    <title>WebSocket_Test</title>
</head>

<body>
<h2>本页面用来测试WebSocket功能</h2>
<input id="address" type="text" style="width: 300px" value="ws://airtest.openluat.com:2900/websocket"/>
<button id="connect_button" onclick="connect()" disabled="disabled">建立连接</button>
<button id="disconnect_button" onclick="disconnect()" disabled="disabled">断开连接</button>
<hr>
<input id="send_message" type="text" style="width: 300px">
<button id="send_button" onclick="send()" disabled="disabled">发送</button>
<button onclick="clear_message_area()">清空消息区</button>
<hr>
<div id="message"></div>
</body>
<script type="text/javascript">
    let websocket = null;
    document.getElementById("connect_button").disabled = ""

    //将消息显示在网页上
    function addMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //建立WebSocket连接
    function connect() {
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            //改成你的地址
            websocket = new WebSocket(document.getElementById("address").value);
            document.getElementById("connect_button").disabled = "disabled"
            document.getElementById("disconnect_button").disabled = ""
            document.getElementById("address").disabled = "disabled"
            document.getElementById("send_button").disabled = ""
        } else {
            alert('当前浏览器不支持websocket')
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            addMessageInnerHTML("WebSocket连接发生错误");
            document.getElementById("disconnect_button").disabled = "disabled"
            document.getElementById("connect_button").disabled = ""
            document.getElementById("address").disabled = ""
            document.getElementById("send_button").disabled = "disabled"
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
            addMessageInnerHTML("WebSocket连接成功");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            addMessageInnerHTML("收->" + event.data);
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            addMessageInnerHTML("WebSocket连接关闭");
            document.getElementById("disconnect_button").disabled = "disabled"
            document.getElementById("connect_button").disabled = ""
            document.getElementById("address").disabled = ""
            document.getElementById("send_button").disabled = "disabled"
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            disconnect();
        }
    }

    //关闭WebSocket连接
    function disconnect() {
        if (websocket != null) {
            websocket.close();
            document.getElementById("disconnect_button").disabled = "disabled"
            document.getElementById("connect_button").disabled = ""
            document.getElementById("address").disabled = ""
            document.getElementById("send_button").disabled = "disabled"
        }
    }

    //发送消息
    function send() {
        let message = document.getElementById('send_message').value
        websocket.send(message);
        addMessageInnerHTML("发<-" + message + "\n");
    }

    function clear_message_area() {
        document.getElementById('message').innerHTML = "";
    }
</script>

</html>